{% extends 'base.html' %}

{% block title %}内容管理{% endblock %}

{% block content %}
<div class="row">
    <!-- 侧边栏（保留原代码） -->
    <div class="col-md-3 col-lg-2 sidebar p-3">
        <div class="list-group">
            <a href="{% url 'dashboard' %}" class="list-group-item list-group-item-action" data-target="content-dashboard">仪表盘</a>
            <a href="{% url 'user_manage' %}" class="list-group-item list-group-item-action">用户管理</a>
            <a href="{% url 'content_manage' %}" class="list-group-item list-group-item-action active">内容管理</a>
            <a href="{% url 'system_config' %}" class="list-group-item list-group-item-action">系统配置</a>
            <a href="{% url 'data_statistics' %}" class="list-group-item list-group-item-action">数据统计</a>
            <a href="{% url 'log_manage' %}" class="list-group-item list-group-item-action">日志管理</a>
            <a href="{% url 'message_center' %}" class="list-group-item list-group-item-action">消息中心</a>
            <a href="{% url 'help_document' %}" class="list-group-item list-group-item-action">帮助文档</a>
        </div>
    </div>

    <!-- 内容区域（功能增强版） -->
    <div class="col-md-9 col-lg-10 p-4" id="content-content-manage">
        <h3 class="mb-4">内容管理</h3>

        <!-- 操作栏（搜索+筛选+批量操作） -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <!-- 批量操作 -->
            <div class="d-flex gap-2">
                <button class="btn btn-primary" onclick="window.location.href='{% url "add_content" %}'">
                    <i class="bi bi-plus-circle"></i> 新增内容
                </button>
                <button class="btn btn-danger" id="batchDelete">
                    <i class="bi bi-trash"></i> 批量删除
                </button>
                <button class="btn btn-secondary" id="batchApprove">
                    <i class="bi bi-check-circle"></i> 批量审核
                </button>
            </div>

            <!-- 搜索功能 -->
            <div class="input-group w-50">
                <input type="text" class="form-control" placeholder="按标题/关键词/作者搜索"
                       aria-label="内容搜索" aria-describedby="search-button">
                <button class="btn btn-outline-secondary" type="button" id="search-button">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </div>

        <!-- 筛选栏（状态+分类+时间+范围） -->
        <div class="row g-3 mb-4">
            <div class="col-md-3">
                <select class="form-select" aria-label="内容状态筛选">
                    <option value="">所有状态</option>
                    <option value="published" class="text-success">
                        <i class="bi bi-check-circle"></i> 已发布
                    </option>
                    <option value="draft" class="text-secondary">
                        <i class="bi bi-file-earmark"></i> 草稿
                    </option>
                    <option value="pending" class="text-warning">
                        <i class="bi bi-hourglass-split"></i> 待审核
                    </option>
                </select>
            </div>

            <div class="col-md-3">
                <select class="form-select" aria-label="内容分类筛选">
                    <option value="">所有分类</option>
                    <option value="tutorial">教程</option>
                    <option value="announcement">公告</option>
                    <option value="news">新闻</option>
                    <option value="product">产品介绍</option>
                </select>
            </div>

            <div class="col-md-3">
                <input type="date" class="form-control" placeholder="发布时间筛选">
            </div>

            <div class="col-md-3">
                <select class="form-select" aria-label="发布范围筛选">
                    <option value="">所有范围</option>
                    <option value="public">公开</option>
                    <option value="private">私有</option>
                    <option value="group">指定用户组</option>
                </select>
            </div>
        </div>

        <!-- 内容列表（增强版表格） -->
        <div class="card">
            <div class="card-body">
                <table class="table table-hover table-striped table-responsive">
                    <thead>
                        <tr class="table-dark">
                            <th>ID</th>
                            <th>标题</th>
                            <th>分类</th>
                            <th>状态</th>
                            <th>发布时间</th>
                            <th>浏览量</th>
                            <th>点赞数</th>
                            <th>评论数</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>新手入门指南</td>
                            <td>教程</td>
                            <td><span class="badge bg-success">已发布</span></td>
                            <td>2024-05-20 14:30</td>
                            <td>1,234</td>
                            <td>56</td>
                            <td>12</td>
                            <td>
                                <a href="#" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-pencil"></i> 编辑
                                </a>
                                <a href="#" class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-trash"></i> 删除
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>系统更新公告</td>
                            <td>公告</td>
                            <td><span class="badge bg-warning">待审核</span></td>
                            <td>2024-05-21 09:15</td>
                            <td>890</td>
                            <td>34</td>
                            <td>5</td>
                            <td>
                                <a href="#" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-pencil"></i> 编辑
                                </a>
                                <a href="#" class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-trash"></i> 删除
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>产品新功能介绍</td>
                            <td>产品</td>
                            <td><span class="badge bg-secondary">草稿</span></td>
                            <td>2024-05-22 16:45</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>
                                <a href="#" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-pencil"></i> 编辑
                                </a>
                                <a href="#" class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-trash"></i> 删除
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分页（示例） -->
        <nav class="mt-4" aria-label="内容列表分页">
            <ul class="pagination justify-content-center">
                <li class="page-item disabled">
                    <span class="page-link">上一页</span>
                </li>
                <li class="page-item active" aria-current="page">
                    <span class="page-link">1</span>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">下一页</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 模拟筛选和搜索功能（实际需后端配合）
    document.getElementById('search-button').addEventListener('click', function() {
        // 实现搜索逻辑
        alert('搜索功能已触发（示例）');
    });

    // 批量操作示例
    document.getElementById('batchDelete').addEventListener('click', function() {
        // 实现批量删除逻辑
        alert('批量删除功能已触发（示例）');
    });
</script>
{% endblock %}

{% block extra_js %}
<script>
    // 侧边栏交互逻辑
    document.querySelectorAll('.list-group-item').forEach(item => {
        item.addEventListener('click', function(e) {
            document.querySelector('.list-group-item.active').classList.remove('active');
            this.classList.add('active');
        });
    });
</script>
{% endblock %}